<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../../templates/principal.xhtml">

    <ui:define name="content" id="content">
        <p:panel id="panel" header="Bem Vindo ao Cadastro de SUC" style="">
            <p:dataTable id="gridSuc" widgetVar="wtabSuc" var="suc" value="#{sucView.sucMalaLazy}" 
                         lazy="true" paginator="true" paginatorPosition="top" rows="14" resizableColumns="true"
                         emptyMessage="Nenhum Registro Retornado ..." filterEvent="enter">

                <p:column headerText="Suc" sortBy="#{suc.suc}" filterBy="#{suc.suc}">
                    <h:outputText value="#{suc.suc}" />
                </p:column>

                <p:column headerText="Fantasia" sortBy="#{suc.fantasia}" filterBy="#{suc.fantasia}">
                    <h:outputText value="#{suc.fantasia}" />
                </p:column>

                <p:column headerText="Razão Social" sortBy="#{suc.razSoc}" filterBy="#{suc.razSoc}">
                    <h:outputText value="#{suc.razSoc}" />
                </p:column>

                <p:column headerText="Contato" sortBy="#{suc.contato}" filterBy="#{suc.contato}">
                    <h:outputText value="#{suc.contato}" />
                </p:column>

                <p:column headerText="Telefone Loja" sortBy="#{suc.teleLoja}" filterBy="#{suc.teleLoja}">
                    <h:outputText value="#{suc.teleLoja}" />
                </p:column>

                <p:column headerText="Telefone" sortBy="#{suc.telefone}" filterBy="#{suc.telefone}">
                    <h:outputText value="#{suc.telefone}" />
                </p:column>

                <p:column headerText="Ramal" sortBy="#{suc.ramal}" filterBy="#{suc.ramal}">
                    <h:outputText value="#{suc.ramal}" />
                </p:column>

                <p:column headerText="E-Mail" sortBy="#{suc.email}" filterBy="#{suc.email}">
                    <h:outputText value="#{suc.email}" />
                </p:column>

                <p:column headerText="Mix" sortBy="#{suc.idAtividade.descMix}" filterBy="#{suc.idAtividade.descMix}">
                    <h:outputText value="#{suc.idAtividade.descMix}" />
                </p:column>

                <p:column headerText="Cód.Mix" sortBy="#{suc.idAtividade.codMix}" filterBy="#{suc.idAtividade.codMix}">
                    <h:outputText value="#{suc.idAtividade.codMix}" />
                </p:column>

                <p:column style="width: 100px;">
                    <h:panelGrid columns="2">
                        <p:commandButton id="selectButtonSuc" update=":frmPrincipal:panel :frmPrincipal:messages" rendered="#{menuView.verificaAcesso(18,'consultar')}" 
                                         icon="ui-icon-search" title="Visualizar // Alterar SUC" oncomplete="PF('sucDialog').show();">
                            <f:setPropertyActionListener value="#{suc}" target="#{sucView.selectedSucMala}" />
                            <f:setPropertyActionListener value="#{false}" target="#{menuView.salvar}" />
                        </p:commandButton>

                        <p:commandButton id="excluirButtonSuc" update=":frmPrincipal:panel :frmPrincipal:messages" rendered="#{menuView.verificaAcesso(18,'excluir')}" 
                                         icon="ui-icon-trash" title="Excluir SUC" oncomplete="PF('confirmation').show();">
                            <f:setPropertyActionListener value="#{suc}" target="#{sucView.selectedSucMala}" />
                        </p:commandButton>
                    </h:panelGrid>
                </p:column>

                <f:facet name="footer">
                    <div style="text-align: left;">
                        <p:commandButton id="incluirButtonSuc" actionListener="#{sucView.preparaInserir}" 
                                         update=":frmPrincipal:panel :frmPrincipal:messages" value="Novo SUC" rendered="#{menuView.verificaAcesso(18,'incluir')}"
                                         icon="ui-icon-pencil" title="Cadastrar Novo SUC" oncomplete="PF('sucDialog').show();">
                            <f:setPropertyActionListener value="#{true}" target="#{menuView.salvar}" />
                        </p:commandButton>
                    </div>
                </f:facet>
            </p:dataTable>

            <p:dialog id="dialogSuc" header="Detalhes SUC: #{sucView.selectedSucMala.fantasia}" widgetVar="sucDialog" resizable="false" 
                      position="center" showEffect="slide" hideEffect="slide">
                <p:focus context="tabSuc" />
                <p:ajax event="close" update=":frmPrincipal:panel :frmPrincipal:messages" listener="#{menuView.fechaDialog}" />

                <p:tabView id="tabSuc" dynamic="true" cache="true">
                    <p:tab title="Principal">
                        <p:panelGrid id="displaySuc" style="text-align: left;">
                            <p:row>
                                <p:column>
                                    <h:outputText value="SUC:" />
                                </p:column>
                                <p:column colspan="5">
                                    <p:inputText id="inSuc" value="#{sucView.selectedSucMala.suc}" style="width:300px; font-weight:bold" maxlength="30" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Nome Fantasia:" />
                                </p:column>
                                <p:column colspan="5">
                                    <p:inputText id="inFantasia" value="#{sucView.selectedSucMala.fantasia}" style="width:800px; font-weight:bold" maxlength="30" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Razão Social:" />
                                </p:column>
                                <p:column colspan="5">
                                    <p:inputText id="inRazSoc" value="#{sucView.selectedSucMala.razSoc}" style="width:800px; font-weight:bold" maxlength="30" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Ramos Atividade:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inAtividade" value="#{sucView.selectedSucMala.idAtividade.descMix}" style="width:500px; font-weight:bold" readonly="true" />
                                    <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Ramo de Atividade" update=":frmPrincipal:tabAtividade" onclick="PF('atividadeDialog').show();" /> 
                                </p:column>
                                <p:column>
                                    <h:outputText value="Categoria:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inCategoria" value="#{sucView.selectedSucMala.idCategoria.dscCategoria}" style="width:500px; font-weight:bold" readonly="true" />
                                    <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Categoria" update=":frmPrincipal:tabCategoria" onclick="PF('categoriaDialog').show();" /> 
                                </p:column>
                                <p:column colspan="2">
                                    <p:dataList value="#{sucView.selectedSucMala.idCategoria.categoriaGrupoList}" var="grupo" type="definition">
                                        <f:facet name="header">
                                            <h:outputText value="Grupos"/>
                                        </f:facet>
                                        <h:outputText value="#{grupo.dscGrupo}" />
                                    </p:dataList>
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="C.E.P.:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inCep" value="#{sucView.selectedSucMala.codLogradouro.numCep}" style="width:200px; font-weight:bold" readonly="true" />
                                    <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Endereço" update=":frmPrincipal:tabEndereco" onclick="PF('enderecoDialog').show();" /> 
                                </p:column>
                                <p:column>
                                    <h:outputText value="Endereço:" />
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText id="inEndereco" value="#{sucView.selectedSucMala.codLogradouro.dscLogradouro}" style="width:800px; font-weight:bold" readonly="true" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Numero:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inNumero" value="#{sucView.selectedSucMala.numero}" style="width:100px; font-weight:bold" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="Complemento:" />
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText id="inComplemento" value="#{sucView.selectedSucMala.complemento}" style="width:500px; font-weight:bold" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Bairro:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inBairro" value="#{sucView.selectedSucMala.codLogradouro.codBairro.dscBairro}" style="width:400px; font-weight:bold" readonly="true" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="Cidade:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inCidade" value="#{sucView.selectedSucMala.codLogradouro.codBairro.codCidade.dscCidade}" style="width:400px; font-weight:bold" readonly="true" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="Estado:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inUf" value="#{sucView.selectedSucMala.codLogradouro.codBairro.codCidade.codUf.codUf}" style="width:50px; font-weight:bold" readonly="true" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Contato:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inContato" value="#{sucView.selectedSucMala.contato}" style="width: 500px; font-weight:bold" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="C.N.P.J.:" />
                                </p:column>
                                <p:column>
                                    <p:inputMask mask="99.999.999/9999-99" id="inCnpj" value="#{sucView.selectedSucMala.cgc}" style="width:200px; font-weight:bold" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="I.E.:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inIe" value="#{sucView.selectedSucMala.ie}" style="width:200px; font-weight:bold" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Telefone:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inTelefone" value="#{sucView.selectedSucMala.telefone}" style="width:200px; font-weight:bold" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="Telefone Loja:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inTelLoja" value="#{sucView.selectedSucMala.teleLoja}" style="width:200px; font-weight:bold" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="Ramal:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inRamal" value="#{sucView.selectedSucMala.ramal}" style="width: 100px; font-weight:bold" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="E-Mail:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inEmail" value="#{sucView.selectedSucMala.email}" style="width:500px; font-weight:bold" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="E-Mail Alternativo:" />
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText id="inEmail2" value="#{sucView.selectedSucMala.email2}" style="width:500px; font-weight:bold" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Item:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inItem" value="#{sucView.selectedSucMala.idAtividade.codMix}" style="width:200px; font-weight:bold" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="Área:" />
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText id="inArea" value="#{sucView.selectedSucMala.area}" style="font-weight:bold; text-align: right;"
                                                 onkeyup="javascript:maskIt(this, event, '###,##', true)">
                                        <f:convertNumber type="percent" pattern="##0.00" locale="pt-BR"/>
                                    </p:inputText>
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column colspan="6">
                                    <p:fieldset legend="Tipo SUC">
                                        <p:selectOneRadio value="#{sucView.selectedSucMala.idGrupo}"  layout="grid" columns="3" style="width: 100%;" converter="entityConverter">
                                            <f:selectItems value="#{sucView.categoriaGrupoList}" var="grid" itemLabel="#{grid.dscGrupo}" itemValue="#{grid}" />
                                        </p:selectOneRadio>
                                    </p:fieldset>
                                </p:column>
                            </p:row>

                            <f:facet name="footer">
                                <p:row>
                                    <p:column colspan="6">
                                        <p:commandButton value="Salvar" update=":frmPrincipal:panel :frmPrincipal:messages" rendered="#{menuView.verificaAcesso(18,'incluir')}"
                                                         icon="ui-icon-disk" actionListener="#{sucView.inserir}" oncomplete="PF('sucDialog').hide();" />
                                        <p:commandButton value="Salvar" update=":frmPrincipal:panel :frmPrincipal:messages" rendered="#{menuView.verificaAcesso(18,'alterar')}"
                                                         icon="ui-icon-disk" actionListener="#{sucView.alterar}" oncomplete="PF('sucDialog').hide();" />
                                    </p:column>
                                </p:row>
                            </f:facet>
                        </p:panelGrid>
                    </p:tab>
                    <p:tab title="Obsrvações - Situação do SUC">
                        <p:inputTextarea id="inObs" value="#{sucView.selectedSucMala.obs}" rows="30" cols="200" style="width: 100%;" />
                    </p:tab>
                </p:tabView>

            </p:dialog>
            <!-- CONFIRMA EXCLUSAO -->
            <p:dialog header="Confirma a Exclusão desse SUC?" widgetVar="confirmation">
                <p:commandButton value="Sim" update=":frmPrincipal:panel :frmPrincipal:messages" oncomplete="PF('confirmation').hide();"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-check" actionListener="#{sucView.excluir}" />
                <p:commandButton value="Não" onclick="PF('confirmation').hide();" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </p:dialog>
            <!-- PESQUISA RAMO DE ATIVIDADE -->
            <p:dialog id="dialogAtividade" header="Pesquisa Ramo de Atividade" widgetVar="atividadeDialog" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode" position="right,bottom">
                <p:dataTable id="tabAtividade" widgetVar="wtabAtividade" var="atividade" value="#{atividadeView.atividadeLazy}" 
                             lazy="true" paginator="true" rows="10" paginatorPosition="top"
                             emptyMessage="Nenhum Registro Retornado ..." filterEvent="enter">

                    <p:column headerText="Mix" sortBy="#{atividade.codMix}" filterBy="#{atividade.codMix}" style="width: 120px;" filterStyleClass="mix">
                        <h:outputText value="#{atividade.codMix}" />
                    </p:column>

                    <p:column headerText="Descrição" sortBy="#{atividade.descMix}" filterBy="#{atividade.descMix}" style="width: 100%;">
                        <h:outputText value="#{atividade.descMix}" />
                    </p:column>

                    <p:column style="width: 50px;">
                        <h:panelGrid columns="2">
                            <p:commandButton id="selectButtonAtividade" update=":frmPrincipal:tabSuc :frmPrincipal:messages"
                                             icon="ui-icon-check" title="Selecionar Ramo de Atividade" oncomplete="PF('atividadeDialog').hide();">
                                <f:setPropertyActionListener value="#{atividade}" target="#{sucView.selectedSucMala.idAtividade}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </p:column>
                </p:dataTable>  
            </p:dialog>
            <!-- PESQUISA CATEGORIA -->
            <p:dialog id="Dialogcategoria" header="Detalhes Categoria" widgetVar="categoriaDialog" resizable="false" 
                      width="600" showEffect="explode" hideEffect="explode" position="right,bottom">
                <p:dataTable id="tabCategoria" widgetVar="wtabCategoria" var="categoria" value="#{categoriaView.categoriaLazy}" 
                             lazy="true" paginator="true" rows="10" paginatorPosition="top"
                             emptyMessage="Nenhum Registro Retornado ..." filterEvent="enter">

                    <p:column style="width:2%">
                        <p:rowToggler />
                    </p:column>

                    <p:column headerText="Descrição" sortBy="#{categoria.dscCategoria}" filterBy="#{categoria.dscCategoria}" style="width: 100%;">
                        <h:outputText value="#{categoria.dscCategoria}" />
                    </p:column>

                    <p:rowExpansion>
                        <p:dataTable id="tabGrupo" widgetVar="wtabGrupo" var="grupo" value="#{categoria.categoriaGrupoList}" 
                                     emptyMessage="Nenhum Registro Retornado ...">

                            <f:facet name="header">
                                <h:outputText value="Grupos da Categoria" />
                            </f:facet>

                            <p:column style="width: 100%;">
                                <h:outputText value="#{grupo.dscGrupo}" />
                            </p:column>
                        </p:dataTable>

                    </p:rowExpansion>

                    <p:column style="width: 50px;">
                        <h:panelGrid columns="2">
                            <p:commandButton id="selectButtonCategoria" update=":frmPrincipal:tabSuc :frmPrincipal:messages" 
                                             icon="ui-icon-check" title="Selecionar Categoria" oncomplete="PF('categoriaDialog').hide();">
                                <f:setPropertyActionListener value="#{categoria}" target="#{sucView.selectedSucMala.idCategoria}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </p:column>
                </p:dataTable>
            </p:dialog>
            <!-- PESQUISA ENDERECO -->
            <p:dialog id="dialogEndereco" header="Detalhes Endereço" widgetVar="enderecoDialog" resizable="false"
                      width="1000" showEffect="explode" hideEffect="explode" position="right,bottom">
                <p:dataTable id="tabEndereco" widgetVar="wtabEndereco" var="endereco" value="#{cepEnderecoView.cepEnderecoLazy}" filterEvent="enter" resizableColumns="true"
                             lazy="true" paginator="true" rows="10" paginatorPosition="top" emptyMessage="Nenhum Registro Retornado ..." style="text-align: left">

                    <p:column headerText="C.E.P." sortBy="#{endereco.numCep}" filterBy="#{endereco.numCep}">
                        <h:outputText value="#{endereco.numCep}" />
                    </p:column>

                    <p:column headerText="Descrição" sortBy="#{endereco.dscLogradouro}" filterBy="#{endereco.dscLogradouro}">
                        <h:outputText value="#{endereco.dscLogradouro}" />
                    </p:column>

                    <p:column headerText="Bairro" sortBy="#{endereco.codBairro.dscBairro}" filterBy="#{endereco.codBairro.dscBairro}">
                        <h:outputText value="#{endereco.codBairro.dscBairro}" />
                    </p:column>

                    <p:column headerText="Cidade" sortBy="#{endereco.codBairro.codCidade.dscCidade}" filterBy="#{endereco.codCidade.dscCidade}">
                        <h:outputText value="#{endereco.codBairro.codCidade.dscCidade}" />
                    </p:column>

                    <p:column headerText="U.F." sortBy="#{endereco.codBairro.codCidade.codUf.codUf}" filterBy="#{endereco.codBairro.codCidade.codUf.codUf}">
                        <h:outputText value="#{endereco.codBairro.codCidade.codUf.codUf}" />
                    </p:column>

                    <p:column style="width: 50px;">
                        <h:panelGrid columns="4" styleClass="actions" cellpadding="0">
                            <p:commandButton id="selectButton" update=":frmPrincipal:tabSuc, :frmPrincipal:messages" 
                                             icon="ui-icon-check" title="Selecionar Endereço" oncomplete="PF('enderecoDialog').hide();">
                                <f:setPropertyActionListener value="#{endereco}" target="#{sucView.selectedSucMala.codLogradouro}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </p:column>
                </p:dataTable>
            </p:dialog>
        </p:panel>
    </ui:define>
</ui:composition>